<template>
  <div class="table-right">
    <slot></slot>
    <field-input :field="field" v-if="field.component_type === 'input'"></field-input>
    <field-date :field="field" v-else-if="field.component_type === 'date'"></field-date>
    <field-number :field="field" v-else-if="field.component_type === 'number'"></field-number>
    <field-rate :field="field" v-else-if="field.component_type === 'rate'"></field-rate>
    <field-select :field="field" v-else-if="field.component_type === 'select'"></field-select>
    <field-tree-select :field="field" v-else-if="field.component_type === 'treeselect'"></field-tree-select>
    <field-none :field="field" v-else></field-none>
  </div>
</template>

<script>
import fieldInput from './form-components/input.vue';
import fieldDate from './form-components/date.vue';
import fieldNone from './form-components/none.vue';
import fieldNumber from './form-components/number.vue';
import fieldRate from './form-components/rate.vue';
import fieldSelect from './form-components/select.vue';
import fieldTreeSelect from './form-components/treeselect.vue';
import fieldUpload from './form-components/upload.vue';

export default {
  name: 'fieldSetting',
  components: {
    fieldInput,
    fieldDate,
    fieldNone,
    fieldNumber,
    fieldRate,
    fieldSelect,
    fieldTreeSelect,
    fieldUpload
  },
  props: {
    field: {
      type: Object,
      default: () => {
        return {};
      }
    }
  }
};
</script>
